<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file">
  <div class="box">
  </div>
  <script type="text/javascript">
    const input=document.querySelector("input");
    //选中上传数据数据
    input.onchange=function (Event){
      const formdata=new FormData();
      //一次只上传一个文件，所以不用多次添加,这一步是配置上传的FormData对象
      formdata.append("myfile",Event.target.file[0]);
      upload(formdata);
    }
//上传数据的函数
      function upload(formdata){
       const xml=new XMLHttpRequest();
       xml.get("POST","/lesson16/xmlup");
       //因为服务器返回的数据类型是strin，而不是json对象
       xml.responseType="json";
       xml.onreadystatechange=function (){
       if(xml.status == 200 && xml.readyState == 4){
         //之所以要将URL设置为这样，是因为在路由中已经预先设置了加载图片的路由
          const imgUrl="/lesson16/img/"+xml.response.filename;
          addImg(imgUrl);
       }
     };
       //通过send发送这个FormData对象
        xml.send(formdata);
      }
//加载图片的函数
      function addImg(url){
        const img=new Image();
        ima.url=url;
        img.width="100px";
        img.height="100px";
        document.querySelector(".box").appendChild(img);
      }
  </script>
</body>
</html>
